<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header img{
      vertical-align: middle;//设置中间对齐
    }
    .el-header a{
      text-decoration: none;//去掉下划线
    }
    .el-table .el-table__cell {
      padding: 0 0;/*去掉自带的内边距*/
    }
    ul{
      list-style-type: none;
      margin: 0;
      padding-left: 30px;
      overflow: hidden;
    }
    li{
      float: left;
      margin-right: 10px;
      margin-left: 20px;
    }
    .c1>p{
      color: black;
      margin: 20px 0 10px 10px;
    }
    .c1 a{
      text-decoration: none;/*去掉超链接下划线*/
      color: black;
    }
    .c1 a:hover{/*hover鼠标悬停*/
      background-color: red;
      border-radius: 5px;
    }
    #b_l_div{
      width: 100%;
      height: 233px;
      background-color: #e8e8e8;
      float: left;
    }
    #top_div{
      height: 35px;
      background-color: #ffc300;
      border-radius: 2px;
    }
    #top_div>span{
      font-size: 16px;
      color: white;
      position: relative;
      top: 5px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="120px">
      <div style="width:1200px;margin: 0 auto">
        <img src="imgs/logo.png" width="300">
        <el-input style="width:600px;position: relative;left: 250px" placeholder="请输入搜索美食或酒店">

          <el-button   slot="append" icon="el-icon-search">搜索</el-button>
        </el-input>

      </div>
    </el-header>
    <!--=======================================================-->
    <el-main style="width:1200px;margin: 0 auto">
      <el-row >
        <div id="b_l_div">
          <div id="top_div">
            <span>已选条件</span>
          </div>
          <div class="c1">
            <p>分类 全部</p>
            <ul>
              <li v-for="c in categoryArr"><a href="javascript:void(0)" @click="select(c.id)">{{c.name}}</a></li>

            </ul>
          </div>
          <div class="c1">
            <p>价格 全部</p>
            <ul>
              <li v-for="p in priceArr"><a href="javascript:void(0)" @click="selectPr(p.id)">{{p.name}}</a></li>

            </ul>
          </div>
        </div>
      </el-row>
      <!--**********************************************************************-->

      <el-row gutter="5" v-for="pro in productArr" style="margin: 10px auto">
        <el-col span="12" style="width:430px;height: 300px" >
            <el-card style="width:300px;height: 300px">
              <img :src="pro.url" width="100%">
            </el-card>
        </el-col>
        <el-col span="12" style="width:400px;height: 300px;">
            <p style="font-size: 25px;font-weight: bold">{{pro.title}}</p>

            <p style="color:#666;font-size: 15px">
              销量：{{pro.saleCount}} 浏览量：{{pro.viewCount}}
              <span style="font-size: 10px;float: right" >发布时间:{{pro.created}}</span></p>


            <p style="font-size: 20px;font-weight: bold">
              ￥{{pro.price}}
              <span style="font-size: 15px;color: #666">
              原价：<s>{{pro.oldPrice}}</s>
            </span>
            </p>
            <el-row gutter="30" style="top: 20px">
              <el-col span="8" >
                <el-button style="background-color: #ffc300"round>
                  <a href="" style="text-decoration: none">立即抢购</a>
                </el-button>
              </el-col>

              <el-col span="8">
                <el-button style="background-color: #2db3a6;"round>
                  <a href="" style="text-decoration: none;color: red">加入购物车</a>
                </el-button>
              </el-col>

              <el-col span="8">
                <el-button style="background-color:white" round>我的收藏</el-button>
              </el-col>

            </el-row>
        </el-col>
      </el-row>


    </el-main>
    <!--==================================================================================-->
    <el-footer style="width:1200px;margin: 0 auto">
      <div style="height:100px;background-color: #3f3f3f;text-align: center;color: #b1b1b1;padding: 30px 0">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
      </div>
    </el-footer>
  </el-container>

</div>
</body>
<!--引入axios框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        categoryArr:[],
        priceArr:[],
        productArr:[],
        cId:""

      }
    },
    methods:{
      select(id){
        ////请求选中分类id商品信息
        axios.get("/product/selectByCid?id="+id).then(function (response){
          v.cId=id;

          v.productArr = response.data;
        })
      },
      selectPr(id){
        ////请求选中价格id商品信息
        axios.get("/product/selectByPid?id="+id+"&cId="+v.cId).then(function (response){

          v.productArr = response.data;
        })
      }
    },
    created:function (){

      //请求所有的分类信息
      axios.get("/category/select").then(function (response){
        v.categoryArr = response.data;
      })
      //请求所有的分类信息
      axios.get("/category/selectPrice").then(function (response){
        v.priceArr = response.data;
      })
      ////请求所有商品信息
      axios.get("/product/select").then(function (response){
        v.productArr = response.data;
      })




    }

  })
</script>
</html>